<template>
  <div class="cont">
    <div class="common-content cont-main">
      <el-table
          ref="TestTable"
          :data="lists"
          class="yt-table"
          border
          height="100%"
          :row-class-name="rowClassName">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="appName" label="应用名称" width="170px"></el-table-column>
        <el-table-column prop="appRunName" label="异常名称" width="170px"></el-table-column>
        <el-table-column prop="appState" label="应用状态" width="100px">
          <template slot-scope="{row}">
            <span class="status-label"
                  :class="[
                        {'gb-success':row.appState == 0},
                        {'gb-runing':row.appState == 1},
                        {'gb-error':row.appState == 2},
                        {'gb-default':row.appState == 3}
                        ]">
                    <i v-if="row.appState == 0">运行成功</i>
                    <i v-else-if="row.appState == 1">运行中</i>
                    <i v-else-if="row.appState == 2">运行异常</i>
                    <i v-else-if="row.appState == 3">未运行</i>
                    <i v-else>未知</i>
                  </span>
          </template>
        </el-table-column>
        <el-table-column prop="errorText" label="异常说明"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="170px"></el-table-column>
        <el-table-column prop="addTime" label="发生时间" width="170px"></el-table-column>
        <!--<el-table-column prop="editTime" label="修改时间" width="170px"></el-table-column>-->
        <el-table-column prop="" label="操作" width="170px">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {formatDate} from '@/utils'

export default {
  name: "AppLogData",
  directives: {},
  data() {
    return {
      lists: [],
      isEnter: false
    };
  },
  created() {
    this.getList()
  },
  mounted() {

  },
  methods: {
    getList() {
      this.$api.getAppRunLog({appId: this.$route.query.appid}).then(res => {
        if (res.data.code === 0) {
          this.lists = res.data.data.map(item => {
            return {
              ...item,
              addTime: formatDate('yyyy-MM-dd hh:mm:ss', item.appDate) || '--'
            }
          })
        }
      })
    },
    rowClassName({row, rowIndex}) {
      if (row.appState == 0) {
        return 'text-color-blue'
      } else if (row.appState == 1) {
        return 'text-color-blue'
      } else if (row.appState == 2) {
        return 'text-color-red'
      } else if (row.appState == 3) {
        return 'text-color-orange'
      } else {
        return ''
      }
    }
  },
};
</script>

<style lang="less" scoped>
  @red: #ff5757;
  @yellow: yellow;
  @orange: #f7903d;
  @blue: #2aef8a;
  @gray: gray;

  @app-runing: #077CF6;
  @app-success: #17A9A8;
  @app-error: #E15A5A;
  @app-default: #3F5C7B;

  .cont {
    width: 100%;
    position: relative;
    padding: 15px;
    height: 100%;

    .cont-main {
      height: 100%;
      padding: 15px;
    }
  }

  /deep/ .el-table {
    .text-color-red {
      .cell {
        color: @red !important;
      }
    }

    .text-color-orange {
      .cell {
        color: @orange !important;
      }
    }

    .text-color-yellow {
      .cell {
        color: @yellow !important;
      }
    }

    .text-color-blue {
      .cell {
        color: @blue !important;
      }
    }
  }

</style>
